<!--  -->
<template>
  <div id="echarts_box" style="width: 800px; height: 600px"></div>
</template>

<script>
import res from "./data";
import * as echarts from "echarts";

export default {
  components: {},

  computed: {},

  async mounted() {
    this.res_file();
    this.chart = await echarts.init(document.getElementById("echarts_box"));
    this.chart.setOption(this.options);
  },

  methods: {
    res_file() {
      var xAxis_arr = [];
      res.subset.forEach((item, index) => {
        //index代表页数
        this.page_size.push(index);
        this.page_size_content.push(item.tradeDate);
        // tradeDate
        //item每一页数据
        var series_arr = [];
        item.subset.forEach((items, indexs) => {
          series_arr.push(items.value);
        });
        //
        this.page_content.push({
          title: {
            text: item.tradeDate,
          },
          series: [
            {
              type: "bar",
              data: series_arr,
            },
          ],
        });
      });
      res.subset[0].subset.forEach((item, index) => {
        xAxis_arr.push(item.name);
      });
      this.options.options = this.page_content;
      this.options.timeline.data = this.page_size_content;
      this.options.yAxis.data = xAxis_arr;
    },
  },
  data() {
    return {
      chart: "",
      page_size: [],
      page_size_content: [],
      page_content: [],
      xAxis_arr_data: [],
      yAxis_arr_data: [],
      options: {
        timeline: {
          data: [],
          label: {
            formatter: function (value, index) {
              return "第" + `${(index += 1)}` + "页";
            },
          },
          autoPlay: false,
          playInterval: 1000,
        },
        tooltip: {},

        grid: {
          top: 80,
          bottom: 100,
          left: 200,
        },
        xAxis: {
          type: "value",
          position: "left",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: { show: true },
          axisLabel: { show: true },
          axisTick: { show: true },
          splitLine: { show: true },
        },
        yAxis: {
          position: "bottom",
          type: "category",
          axisLine: { show: true },
          axisLabel: { show: true },
          axisTick: { show: true },
          splitLine: { show: true },
          data: [],
        },
        options: [],
      },
    };
  },
};
</script>
<style lang='scss' scoped>
</style>